<template>
  <Table
      :columns="Config.columns"
      :row-key="record => record.id"
      :data-source="Config.list"
      :pagination="Config.page"
      :loading="Config.loading"
      @change="(pagination)=> changeHandler(pagination, Config)"
      bordered>
    <template #name="{ text, record }">
      <router-link target="_blank" :to="{ path: `/staff/${record.personId}` }" class="blue" >
        {{ text }}
      </router-link>
    </template>
    <template #indexSlot="{ index }">{{(Config.page.current-1)*10+index+1}}</template>
  </Table>
</template>

<script lang="ts">
import {defineComponent, inject, onMounted, reactive, toRefs} from 'vue';
import { Table } from 'ant-design-vue';
import { getForeignStaffApi  } from '/@/api/foreign';
import { parseTime } from '/@/utils';
// 职称人员
const columns = [
  { title: '序号', dataIndex: 'index', width: 70, align: 'center', slots: ({ customRender: 'indexSlot' }) },
  { title: '人员姓名', dataIndex: 'personName', width: 120, slots: ({ customRender: 'name' }) },
  { title: '证书编号', dataIndex: 'certNo'},
  { title: '证书类别', dataIndex: 'titleName' },
  { title: '证书专业', dataIndex: 'titleMajorName' },
  { title: '发证机关', dataIndex: 'organName', width: 350  },
  { title: '发证日期', dataIndex: 'releaseDate', width: 120, customRender: ({ text })=> parseTime(text) },
]

export default defineComponent({
  components: {
    Table
  } ,
  setup() {
    const corpId = inject('corpId') as string;
    const Config = reactive({
      key: 'prof',
      columns,
      list: [],
      loading: false,
      page: {
        total: 0,
        current: 1
      }
    })

    const changeHandler = (pagination, config) => {
      const { current } = pagination;
      let { loading, list, page } = toRefs(config);
      loading.value = true;
      getForeignStaffApi(config.key, { corpId, current }).then(({ data, success }) => {
        if(success) {
          let { records, current, total } = data;
          list.value = records;
          loading.value = false;
          page.value = {current, total};
        }
      })
    }

    const init = () => {
      changeHandler({current: 1}, Config);
    }
    onMounted(init)

    return {
      Config,  changeHandler , parseTime
    }
  }
})
</script>

<style lang="less" scoped>


.ant-col{
  padding-top: 16px;
  margin-bottom: 8px;
}

.ant-select ,.ant-btn{
  width: 100%;
}

</style>
